<template>
  <div>
    <!--    <el-button @click="ap()" type="primary" style="margin-left: 16px;">-->
    <!--      点我打开-->
    <!--    </el-button>-->

    <div>
      <el-drawer
        :modal='false'
        title="更多信息"
        :visible.sync="drawer">
        <div style="padding-left: 20px;border-top: darkgray solid 1px;padding-top: 5px; font-size: 14px">
          <p><span style="color: darkgray">单位名称&nbsp&nbsp</span><span
            style="position: absolute;left: 90px">{{ list.compName }}</span></p>
          <p><span style="color: darkgray">车牌号&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.carNo
            }}</span></p>
          <p><span style="color: darkgray">车辆类型&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.type
            }}</span></p>
          <p><span style="color: darkgray">设备号&nbsp&nbsp</span><span
            style="position: absolute;left: 90px">{{ list.deviceNo }}</span></p>
          <p><span style="color: darkgray">司机姓名&nbsp&nbsp</span><span
            style="position: absolute;left: 90px">{{ list.driverName }}</span></p>
          <p><span style="color: darkgray">司机电话&nbsp&nbsp</span><span
            style="position: absolute;left: 90px">{{ list.driverPhone }}</span></p>
          <p><span style="color: darkgray">百度经度&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.lot
            }}</span></p>
          <p><span style="color: darkgray">百度纬度&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.lat
            }}</span></p>
          <p><span style="color: darkgray">在线时长&nbsp&nbsp</span><span
            style="position: absolute;left: 90px">{{ list.statusDuration }}</span></p>
          <p><span style="color: darkgray">载重&nbsp&nbsp</span><span style="position: absolute;left: 90px">{{
              list.weight
            }}</span></p>
          <p><span style="color: darkgray">车速&nbsp&nbsp</span><span style="position: absolute;left: 90px">
            {{list.speed}}km/h</span></p>
          <p><span style="color: darkgray">车辆状态&nbsp&nbsp</span><span
            style="position: absolute;left: 90px">{{ list.status }}</span></p>
        </div>

      </el-drawer>
    </div>
    <!--车辆监控数据内容-->
    <div class="nav" v-if="show === true">
      <!--      <el-input v-model="input" placeholder="关键词搜索">-->
      <!--        <i-->
      <!--          class="el-icon-search el-input__icon"-->
      <!--          slot="suffix"-->
      <!--        >-->
      <!--        </i>-->
      <!--      </el-input>-->
      <!-- 远程搜索要使用filterable和remote -->
      <!--      <el-select-->
      <!--        class="selectBox"-->
      <!--        v-model="value"-->
      <!--        filterable-->
      <!--        remote-->
      <!--        placeholder="请输入关键词"-->
      <!--        :remote-method="remoteMethod"-->
      <!--        :loading="loading"-->
      <!--      >-->
      <!--        &lt;!&ndash;        <i&ndash;&gt;-->
      <!--        &lt;!&ndash;          class="el-icon-search el-input__icon"&ndash;&gt;-->
      <!--        &lt;!&ndash;          slot="suffix"&ndash;&gt;-->
      <!--        &lt;!&ndash;        >&ndash;&gt;-->
      <!--        &lt;!&ndash;        </i>&ndash;&gt;-->
      <!--        &lt;!&ndash; remote-method封装好的钩子函数。当用户在输入框中输入内容的时候，会触发这个函数的执行，-->
      <!--        把输入框对应的值作为参数带给回调函数，loading的意思就是远程搜索的时候等待的时间，即：加载中&ndash;&gt;-->
      <!--        &lt;!&ndash;-->
      <!--                  :label="item.label"-->
      <!--                  :value="item.value"     &ndash;&gt;-->
      <!--        <el-option-->
      <!--          v-for="item in options"-->
      <!--          :key="item"-->
      <!--          :value="item"-->
      <!--        >-->
      <!--        </el-option>-->
      <!--      </el-select>-->
      <!--            <el-button v-permission="['GET /info/car/alllocations']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>-->

      <el-tabs class="navBtn" v-model="activeName" :stretch="true" @tab-click="handleClick">
        <el-tab-pane :label="'全部('+allList+')'" name="first">
          <ul>
            <li style="font-size:14px" v-for="item in pointlist" @click="getV(item)">
              <el-button plain style="color: black; border: none;background: none">{{ item.carNo }}({{ item.compName.substr(0,8) }})</el-button>
              <!--              车辆状态-->
              <div :class="['state',item.isOnline === '1'? 'stateT' : '']">{{ item.status }}
              </div>
              <!--              据结束前离线时长-->
              <div class="time">{{ item.statusDuration }}</div>
              <!--              <img src="/src/assets/images/已定位_local.png" alt=""/>-->
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane :label="'在线('+onList+')'" name="second">
          <ul>
            <li style="font-size: 14px" v-for="item in pointlist" v-if="item.isOnline === '1' " @click="getV(item)">
              <!--              {{ item.deviceNo }}-->
              <el-button plain style="color: black; border: none;background: none"> {{ item.carNo }}({{ item.compName.substr(0,8) }})</el-button>
              <div class="stateT">{{ item.status }}</div>
              <div class="time">{{ item.statusDuration }}</div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane :label="'离线('+offList+')'" name="third">
          <ul>
            <li style="font-size: 12px" v-for="item in pointlist" v-if="item.isOnline === '0' " @click="getV(item)">
              <!--              {{ item.deviceNo }}-->
              <el-button plain style="color: black; border: none;background: none"> {{ item.carNo }}({{ item.compName.substr(0,8) }})</el-button>
              <div class="state">{{ item.status }}</div>
              <div class="time">{{ item.statusDuration }}</div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--显示车辆监控数据内容-->
    <div @click="isShow" :class="['collectT',show === false? 'collectF' : '']">
      <i v-if="show === true"
         class="el-icon-caret-left el-input__icon"
         slot="suffix">
      </i>
      <i v-else
         class="el-icon-caret-right el-input__icon"
         slot="suffix">
      </i>
    </div>
    <!--地图容器-->
    <div :class="['bitmap',show === false? 'bitmap1' : '']" id="alma">

    </div>
  </div>
</template>
<script>
import ScrollPane from '../../../layout/components/TagsView/ScrollPane'
import { getAllLocations } from '@/api/wx/loconmap'

export default {
  name: 'index',
  components: {
    ScrollPane

  },
  data() {
    return {

      activeName: 'first',
      show: true, //显示左侧车辆监控数据
      drawer: false,
      allList: 0,//全部车辆数
      onList: 0,//在线车辆数
      offList: 0,//离线车辆数
      pointlist: [],//车辆列表
      isOnline: '',//车辆情况
      lat: 27.192400188144,
      lot: 113.15354307463,
      //搜索框
      options: [],
      value: [],
      loading: false,
      list: {
        // compName: '',//公司名称
        // speed:'',
        // vo: '',//车牌号
        // type: '',//车辆类型
        // deviceNo: '',//设备号
        // driverName: '',//司机姓名
        // driverPhone: '',//司机电话
        // lot: 0,//经度
        // lat: 0,//纬度
        // // iniweight: 0,//空载
        // statusDuration:'',
        // weight: 0,//载重
        // status: ''//车辆状态
      },
    }
  },

  created() {
    this.getList()
  },
  methods: {
    getList() {
      getAllLocations().then(response => {
        if (response.code === 200) {
          console.log("data===", response)
          this.pointlist = response.data.carLocationVoList
          this.onList = response.data.onlineNum
          this.offList = response.data.offlineNum
          this.allList = this.pointlist.length
          this.lot = 112.97145338799
          this.lat = 27.089329629618
          this.baiduMap()
        }
      });
    },
    // 当用户输入内容开始远程搜索模糊查询的时候，会触发remoteMethod方法
    remoteMethod(query) {
      // 如果用户输入内容了，就发请求拿数据，远程搜索模糊查询
      if (query !== "") {
        this.loading = true; // 开始拿数据喽
        // 这里模拟发请求，res就当成发请求返回来的数据吧。
        let res = this.pointlist.map((item) => {
          return item.carNo
        })
        console.log('=res=', res)
        this.loading = false // 拿到数据喽
        // 然后把拿到的所有数据，首先进行一个过滤，把有关联的过滤成一个新数组给到options使用
        this.options = res.filter((item) => {

          // indexOf等于0代表只要首个字匹配的，如：搜索 王 王小虎数据会被过滤出来，但是 小虎王的数据不会被过滤出来。因为indexOf等于0代表以什么开头
          // return item.label.toLowerCase().indexOf(query.toLowerCase()) == 0

          // indexOf大于-1代表的是，只要有这个字出现的即可，如：搜索 王 王小虎、小虎王、小王虎都会被过滤出来。因为indexOf找不到才会返回-1，
          // 大于-1说明只要有就行，不论是不是开头也好，中间也好，或者结尾也好
          return item.toLowerCase().indexOf(query.toLowerCase()) > -1
        })
      } else {
        this.options = [];
      }
    },

    handleClick(tab, event) {
      console.log("====", tab, event);

    },
    getV(item) {
      this.$data.lat = item.lat
      this.$data.lot = item.lot
      this.baiduMap()
    },

    isShow() {
      console.log('监控到车辆数据')
      this.show = !this.show
      console.log('=监测数据是否显示=', this.show)
    },

    baiduMap(opts) {


      //创建地图实例
      this.map = new BMapGL.Map("alma");
      //创建点坐标
      let point = new BMapGL.Point(this.lot, this.lat);
      //初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(point, 15);
      //开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom();
      // this.map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
      // this.map.addControl(new BMapGL.ScaleControl()); //比例尺控件
      // this.map.addControl(new BMap.OverviewMapControl(opts)); //缩略地图控件
      //右上角的切换
      this.map.addControl(new BMapGL.MapTypeControl());
      // map.setMapStyle({style:'midnight'})//地图风格

      const pointList = this.pointlist
      let that = this
      // let drawer = this.drawer
      //定义新图标
      // const myIcon = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/fox.gif', new BMap.Size(300, 157))
      for (let i = 0; i < pointList.length; i++) {
        let point = new BMapGL.Point(pointList[i].lot, pointList[i].lat);
        // 创建标注
        // let marker = new window.BMap.Marker(point,{icon:myIcon});
        let marker = new window.BMapGL.Marker(point);
        // 将标注添加到地图中
        this.map.addOverlay(marker);
        //提示信息  可以解析 HTML标签以及CSS
//         <span v-if="${pointList[i].isOnline} === 1" style='display:inline-block;margin-left:5px;min-width:40px;height:20px;line-height:20px;text-align: center;color: white;background-color:rgb(64, 158, 255);border:#4169E1 solid 1px;  border-radius: 15px;
// '>${pointList[i].status}</span>
//         <span v-if="${pointList[i].isOnline} === 0" style='display:inline-block;margin-left:5px;min-width:40px;height:20px;line-height:20px;text-align: center;color: white;background-color:\t#C0C0C0;border:\t#A9A9A9 solid 1px;  border-radius: 15px;
// '>${pointList[i].status}</span>
        let infoWindow = new BMapGL.InfoWindow(
          `
           <div>
            <span style='font-weight: 600;font-size: 17px'><span style="color: darkgray">车牌号&nbsp&nbsp</span>${pointList[i].carNo}</span>
            <span style='display:inline-block;margin-left:5px;min-width:40px;height:20px;line-height:20px;text-align: center;color:rgb(64, 158, 255);border:#4169E1 solid 1px;  border-radius: 15px;
'>${pointList[i].status}</span>
　　　　　　  <p style='font-weight:0;margin-top: 5px;margin-bottom: 5px'><span style="color: darkgray">单位&nbsp&nbsp</span>${pointList[i].compName}</p>
            <span><span style="color: darkgray">状态&nbsp&nbsp</span>${pointList[i].weightStatus}</span>
            <span style='margin-left: 30px'><span style="color: darkgray">载重&nbsp&nbsp</span>${pointList[i].weight}</span>
            <p style="margin-top: 5px;margin-bottom: 5px">
            <span style="color: darkgray">更多信息&nbsp&nbsp</span>
<!--            <a id="markerbtn" style="color: rgb(64, 158, 255)" onmouseover="this.style.color='red'" onmouseout="this.style.color='rgb(64, 158, 255)'">点击这里查看</a>-->
            <a id="markerbtn" value="${pointList[i].carNo}" style="color: rgb(64, 158, 255)" onmouseover="this.style.color='red'" onmouseout="this.style.color='rgb(64, 158, 255)'">点击这里查看</a>
            </p>

            <p style='text-align:center;'>
            <img src="${'https://zxjy.hyzdzn.cn' + pointList[i].image}" alt="" style='text-align:center;width: 100px;height: 100px;'>
            </p>
<!--            <button type="submit" id="sb" @click="To">点我</button>-->
<!--            <input type="button" id="markerbtn" value="点击弹出" ></input>-->
          </div>
          `
        );

        // // 鼠标移上标注点要发生的事
        // marker.addEventListener("mouseover",function () {
        //   this.openInfoWindow(infoWindow,steelOpts);
        // });
        //
        // //鼠标移开标注点要发生的事
        // marker.addEventListener("mouseout",function(){
        //   this.closeInfoWindow(infoWindow,steelOpts);
        // });
        // 鼠标点击标注点要发生的事情
        marker.addEventListener("click", function () {

          this.openInfoWindow(infoWindow);
        });
        marker.addEventListener("click", function (e) {
          openInfo();
        });

        function openInfo() {
          document.getElementById("markerbtn").onclick = function (e) {
            that.drawer = true
            console.log('====car=====', e.target.attributes.value.nodeValue)
            that.list = pointList.find(v => {
              return v.carNo === e.target.attributes.value.nodeValue
            });
            console.log("===",that.list)
            // that.list.vo = e.target.attributes.value.nodeValue
            // that.list.compName = point.compName
            // that.list.type = point.type
            // that.list.deviceNo = point.deviceNo
            // that.list.driverName = point.driverName
            // that.list.driverPhone = point.driverPhone
            // that.list.lot = point.lot
            // that.list.lat = point.lat
            // that.list.statusDuration = point.statusDuration
            // that.list.weight = point.weight
            // that.list.status = point.status


            // console.log('某一列对象', point)
          }
        }
      }

    }
  }
}
</script>
<style scoped>
/*车辆监控数据内容*/
.nav {
  width: 20%;
  height: 950px;
  float: left;
  padding: 0 10px;
  background: rgb(245, 245, 245);
  border-right: solid rgb(220, 222, 226) 1px;
  font-size: 14px;
}
li{
  margin-left: -20px;
}
/*.nav .el-tabs__nav-wrap::after {*/
/*  width: 95%;*/
/*}*/
/*.el-button--text.is-active,*/
/*.el-button--text:active{*/

/*    background: blue;*/
/*    border-color: blue;*/
/*    color: #00afff;*/
/*}*/
/*.el-button--text:focus,*/
/*.el-button--text:hover{*/
/*  background:rgb(64, 158, 255);*/
/*  border-color: rgb(64, 158, 255);*/
/*  color: #FFFFFF;*/
/*  font-weight: bold;*/
/*  letter-spacing: 1px;*/
/*}*/

.navBtn .el-button:focus,
.navBtn .el-button:hover {
  font-weight: bold;
  letter-spacing: 1px;
}

/*列表去掉默认圆点*/
.navBtn ul {
  list-style: none;
  padding-inline-start: 10px;
  /*border: red solid 1px;*/
}

.navBtn ul li {
  height: 36px;
  width: 75%;
  line-height: 36px;
  /*overflow: hidden;*/
  white-space: nowrap;
  /*text-overflow: ellipsis;*/
  /*border: red solid 1px;*/
}

.state {
  position: absolute;
  right: 22%;
  display: inline-block;
  min-width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  color: white;
  background-color: #C0C0C0;
  border: #A9A9A9 solid 1px;
  border-radius: 15px;
  margin-top: 8px;
  letter-spacing: 1px;
}

.stateT {
  position: absolute;
  right: 22%;
  display: inline-block;
  min-width: 40px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  color: white;
  background-color: rgb(64, 158, 255);
  border: #4169E1 solid 1px;
  border-radius: 15px;
  margin-top: 8px;
  letter-spacing: 1px;
}

/*据结束前离线时长*/
.time {
  position: absolute;
  right: 3%;
  display: inline-block;
  min-width: 40px;
  height: 20px;
  color: #A9A9A9;
}

/*显示车辆监控数据内容*/
.collectT {
  position: absolute;
  top: 350px;
  left: 20%;
  width: 17px;
  height: 55px;
  background-color: rgba(192, 190, 185, .7);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  z-index: 1000;
}

.collectF {
  position: absolute;
  top: 350px;
  left: 0px;
  width: 17px;
  height: 55px;
  background-color: rgba(192, 190, 185, .7);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  /*border: solid 1px green;*/
  z-index: 1000;
}

/*遮罩层*/
.el-drawer__container {
  background-color: red;
}

/*矢量图*/
.collectT .el-input__icon,
.collectF .el-input__icon {
  width: 5px;
  color: rgb(251, 249, 244);
}

.bitmap {
  width: 80%;
  height: 950px;
  float: right;
}

.bitmap1 {
  width: 100%;
  height: 950px;
  float: right;
}

/* 去除百度地图版权那行字 和 百度logo */
.bitmap >>> .anchorBL,
  /*>>> .anchorTR,*/
>>> .BMap_zlHolder {
  display: none;
  visibility: hidden;
}

.drawer_pwd {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  margin: 0;
}

/deep/ .el-drawer {
  width: 300px !important;
}

/*输入框*/
.selectBox {
  max-width: 81%;
}

/*查找按钮*/
.filter-item {
  position: absolute;
  top: 5px;
  min-width: 1.5%;
  height: 30px;
  /*line-height: 30px;*/
  margin-left: 2px;
  padding-top: 8px;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 13px;
}

</style>
